<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    info: { type: Object, required: true },
  },
});
</script>

<template>
  <view class="rule-item">
    <view class="rule-item-title">
      <view class="rule-item-dot"></view>{{ info.name }}
    </view>
    <slot />
    <view class="rule-item-label">说明：</view>
    <view class="rule-item-content">{{ info.desc }}</view>
  </view>
</template>

<style lang="scss">
.rule-item {
  .rule-item-title {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    font-size: 28rpx;
    color: #ff7900;
    line-height: 40rpx;
  }

  .rule-item-dot {
    width: 16rpx;
    height: 16rpx;
    margin-right: 10rpx;
    border-radius: 50%;
    background-color: #ff7900;
  }

  .rule-item-label {
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
  }

  .rule-item-content {
    font-size: 26rpx;
    color: #666666;
    line-height: 40rpx;
    white-space: pre-line;
  }
}
</style>